<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .waterfall {
        display: flex; /* 使用 flex 布局 */
        flex-wrap: wrap; /* 允许元素换行 */
        justify-content: space-between; /* 在行中间隔相等的空间 */
      }

      .item {
        flex: 1 0 30%; /* 设置元素的基本宽度为30% */
        margin-bottom: 20px; /* 设置每个元素的下边距为20像素 */
      }

      .item img {
        width: 100%; /* 将图片宽度设置为100% */
        display: block; /* 将图片设置为块级元素 */
      }

      @media screen and (max-width: 768px) {
        /* 在小屏幕设备上，将列数改为2 */
        .waterfall {
          flex-direction: column;
        }

        .item {
          flex: 1 0 45%; /* 将元素宽度调整为45% */
        }
      }

      @media screen and (max-width: 480px) {
        /* 在更小的屏幕设备上，将列数改为1 */
        .item {
          flex: 1 0 100%; /* 将元素宽度调整为100% */
        }
      }
    </style>
  </head>
  <body>
    <!-- https://picsum.photos/200/300
https://picsum.photos/400/600
https://picsum.photos/500/500
https://picsum.photos/800/600
https://picsum.photos/1024/768
https://picsum.photos/1200/800
https://picsum.photos/1600/900
https://picsum.photos/1920/1080
https://picsum.photos/2560/1440
https://picsum.photos/3840/2160
https://picsum.photos/200/200
https://picsum.photos/300/300
https://picsum.photos/600/400
https://picsum.photos/768/1024
https://picsum.photos/800/1200
https://picsum.photos/900/1600
https://picsum.photos/1080/1920
https://picsum.photos/1440/2560
https://picsum.photos/2160/3840
https://picsum.photos/1200/1200 -->
    <div class="waterfall">
      <div class="item"><img src="https://picsum.photos/200/300" /></div>
      <div class="item"><img src="https://picsum.photos/400/600" /></div>
      <div class="item"><img src="https://picsum.photos/1440/2560" /></div>
      <div class="item"><img src="https://picsum.photos/800/600" /></div>
      <div class="item"><img src="https://picsum.photos/1024/768" /></div>
      <div class="item"><img src="https://picsum.photos/1200/800" /></div>
      <div class="item"><img src="https://picsum.photos/1600/900" /></div>
      <div class="item"><img src="https://picsum.photos/1920/1080" /></div>
      <div class="item"><img src="https://picsum.photos/2560/1440" /></div>
      <div class="item"><img src="https://picsum.photos/3840/2160" /></div>
    </div>
  </body>
</html>
